<template>
<div>
	<div>
		<van-nav-bar
		  title="商品详情"
		  left-text="返回"
		  left-arrow
		  @click-left="onClickLeft"
		/>
	</div>
	

		
		
	<div>
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height: 200px;">
		  <van-swipe-item> <img :src="spxq.src" style="height: 240px;width: 100%;"/> </van-swipe-item>
		  <van-swipe-item> <img :src="spxq.src" style="height: 240px;width: 100%;"/> </van-swipe-item>  
		</van-swipe>
	</div>
	
	<div>
		<h2>
			{{spxq.sname}}
		</h2>
		<van-row>
		  <van-col span="4"><p>销量：{{spxq.sell}}</p></van-col>
		  <van-col span="16"></van-col>
		  <van-col span="4"><div>价格：{{spxq.price}}</div></van-col>
		 
		</van-row>
		
		<h3>
			简介：
		</h3>
		<P>{{spxq.spms}}</P>
		
	</div>
	<!-- 优惠券单元格 -->
	<van-coupon-cell
	  :coupons="coupons"
	  :chosen-coupon="chosenCoupon"
	  @click="showList = true"
	/>
	<!-- 优惠券列表 -->
	<van-popup
	  v-model:show="showList"
	  round
	  position="bottom"
	  style="height: 90%; padding-top: 4px;"
	>
	  <van-coupon-list
	    :coupons="coupons"
	    :chosen-coupon="chosenCoupon"
	    :disabled-coupons="disabledCoupons"
	    @change="onChange"
	    @exchange="onExchange"
	  />
	</van-popup>

	<div><van-row >
	
  <van-col span="5"><van-button round ><van-icon name="chat-o" size="15px" >客服</van-icon></van-button></van-col>
	<van-col span="5"><van-button round ><van-icon name="cart-circle" >购物车</van-icon></van-button></van-col>
  <van-col span="7"><van-button round >加入购物车</van-button></van-col>
  <van-col span="7"><van-button round @click="gopay()">立即购买</van-button></van-col>
</van-row>
		  
			  
	</div>

	
</div>
</template>
<script>
	import { ref } from 'vue';
import { Toast } from 'vant';
export default {
  setup() {  const coupon = {
    available: 1,
    condition: '无使用门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元',
  };
  
  const coupons = ref([coupon]);
  const showList = ref(false);
  const chosenCoupon = ref(-1);
  
  const onChange = (index) => {
    showList.value = false;
    chosenCoupon.value = index;
  };
  const onExchange = (code) => {
    coupons.value.push(coupon);
  };
	   const onClickIcon = () => Toast('点击图标');
	      const onClickButton = () => Toast('点击按钮');
    const onClickLeft = () => history.back();
    return {
		
      onClickLeft,
	   onClickIcon,
      onClickButton,
	  coupons,
	  showList,
	  onChange,
	  onExchange,
	  chosenCoupon,
	  disabledCoupons: [coupon],
	    goods: [],
	        good: [],
	        show: false,
	        cart: []
    };

  
  },
  data () {
	  return{
		  title:"spxq.sname",
		  
		  spxq:[
			  {   id:"",
				  sname:"",
				  price:"",
				  spms:"",
				  sell:"",
			      src:"",
			  }
		  ]
		 
	  }
  },
 mounted() {
	 this.spxq.id=this.$route.query.id;
this.goodsdetail(this.spxq.id)
 	
 }, 
  methods:{
	 
	 goodsdetail(id){
		 
	 			 this.axios.get("goods/selectone?gid="+id).then((res) => {
	 			 			 if(res.data.code==200){
	 			 			  this.spxq=res.data.data
							  console.log(this.spxq)
	 			 			 }else{
	 			 				this.$toast({
	 			 				  message: "亲，网络异常",
	 			 				  
	 							}) 
	 						 }
	 		  }  
	 		  
	 )},
	 
	 gopay(id){
	 			 this.axios.get("/order/insert?gid="+id).then((res) => {
	 				 
	 			 			 if(res.data.code==200){
	 			 				 // this.$router.push("/znsb");
	 							 this.$router.push({
	 								 path:"/pay",
	 								 query:{
	 									 price:price
	 								 }
	 							 })
	 							 this.$store.commit("znsb",res.data.data);
	 							 
	 			 			 }else{
	 			 				this.$toast({
	 			 				  message: "亲，网络异常",
	 			 				  
	 							}) 
	 						 }
	 		  }
	 		  
	 )}
	  	
  }
};




</script>

<style >
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 50px;
    line-height: 200px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
